<template>
    <el-dialog @opened="opened" :title="info.title" :visible.sync="info.isShow" :before-close="close">
        <el-form :model="form" :rules="rules" ref="form">

            <el-form-item label="角色名称" :label-width="formLabelWidth" prop="rolename">
                <el-input v-model="form.rolename" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="角色权限" :label-width="formLabelWidth">
                <el-tree default-expand-all :data="roles" show-checkbox node-key="id"
                    :props="{ children: 'children', label: 'title' }" ref="tree">
                </el-tree>
            </el-form-item>

            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                    :inactive-value="2">
                </el-switch>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button v-if="info.isAdd" type="primary" @click="confirm">确 定</el-button>
            <el-button v-else type="primary" @click="update">修 改</el-button>

        </div>
    </el-dialog>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import { roleAdd, roleInfo, roleEdit } from '@/request/api'
import { successAlert, warningAlert } from '@/utils/alert'
export default {
    data() {
        return {
            formLabelWidth: '120px',
            dialogTableVisible: false,
            dialogFormVisible: true,
            form: {
                rolename: '',  //角色名称
                menus: '',  //角色权限 id数组
                status: 1,  //状态1正常2禁用
            },
            //校验表单
            rules: {
                rolename: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    props: ['info'],
    methods: {
        //修改
        update() {
            //在一次让它拼接
            this.form.menus = this.$refs.tree.getCheckedKeys().join()
            roleEdit(this.form).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    //消息提示
                    successAlert(res.msg)
                    //取消弹窗
                    this.cancel()
                    //更新列表
                    this.requestRole()
                }
            })
        },
        //数据回显
        getDetail(id) {
            // console.log(id);
            roleInfo({ id }).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    this.form = res.list
                    this.form.id = id
                    //通过 keys 设置目前勾选的节点setCheckedKeys    split分隔
                    this.$refs.tree.setCheckedKeys(this.form.menus ? this.form.menus.split(",") : [])
                    // console.log(this.form.menus);
                }
            })
        },
        ...mapActions({
            requestMenu: 'menu/listActions',
            requestRole: 'role/listActions'
        }),
        //取消弹窗
        cancel() {
            this.info.isShow = false
            this.form = {
                rolename: '',  //角色名称
                menus: '',  //角色权限 id数组
                status: 1,  //状态1正常2禁用
            }
            //取消校验表单  对整个表单进行重置
            this.$refs.form.resetFields()
            //设置目前勾选的节点setCheckedKeys为空数组
            this.$refs.tree.setCheckedKeys([])
        },
        close() {
            this.cancel()
        },
        //添加
        confirm() {
            this.$refs.form.validate((val) => {
                // console.log(val);
                if (!val) {
                    return
                }
                if (this.$refs.tree.getCheckedKeys().length === 0) {
                    warningAlert('请选择角色管理')
                    return
                }
                // console.log(this.form);
                //getCheckedKeys则返回目前被选中的节点的 key 所组成的数组   join拼接
                this.form.menus = this.$refs.tree.getCheckedKeys().join()
                // this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys())
                // console.log(this.form.menus);

                // console.log(this.form);
                roleAdd(this.form).then(res => {
                    // console.log(res);
                    if (res.code === 200) {
                        //消息提示
                        successAlert(res.msg)
                        //取消弹窗
                        this.cancel()
                        //更新列表
                        this.requestRole()
                    }
                })
            })
        },

        // 打开dialog动画结束时的回调
        opened() {
            // 发起菜单列表请求同时渲染数据
            this.requestMenu()
        }
    },
    mounted() {

    },
    watch: {},
    computed: {
        ...mapGetters({
            roles: 'menu/list'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>